<template>
    <view class="data-box">
        <view class="data-fixed-box">
            <search
                v-show="!is_view_w"
                @searchText="searchText"
                :placeholder="placeholder"
                :showAddGoods="showAddGoods"
                :md="md"
                @openObjTypeList="openObjTypeList"
                @searchAction="searchAction"
                @inputSearchKw="inputSearchKw"
                @inputFocus="inputFocus"
                @addNewGoods="addNewGoods"
                @upDownClick="upDownClick"
                @setTitleValue="setTitleValue"
                ref="search"
            ></search>
            <view class="complete" v-show="is_batch_operation && !is_view_w">
                <text @click="operationFun">完成</text>
            </view>
            <filters
                v-show="
                    isShowFilters &&
                    !isSearching &&
                    !is_batch_operation &&
                    !is_view_w
                "
                ref="filtersBox"
                @setCat="setCat"
                @setStoreId="setStoreId"
                @setGoods="setGoods"
                @followAndbrand="followAndbrand"
                @setListBoxHeight="setListBoxHeight"
                @getBrand="getBrand"
                :md="md"
                :filltersData="filltersData"
                :storeLs="storeLs"
                :showFiltersGoodsState="showGoodsState"
                :yunList="yunLs"
                :brandList="brandLs"
                :tagsList="tagsLs"
                :tabIndex="tabIndex"
            >
            </filters>
            <searchTotal :total="total" v-show="isSearching"></searchTotal>
            <searchPop
                ref="searchPop"
                :type="5"
                @changeObjType="changeObjType"
                @showAndHideTypeList="showAndHideTypeList"
                @setDefaultObjType="setDefaultObjType"
            >
            </searchPop>
            <searchKwResult
                ref="searchKwResult"
                @doSearch="doSearch"
            ></searchKwResult>
        </view>
        <goodsList
            v-show="!is_view_w"
            @setGoodsInfoData="setGoodsInfoData"
            :goodsLs="goodsLs"
            :topValue="topValue"
            :yunLsList="yunLs"
            @triggerBatch="triggerBatch"
            @getGoodsList="getGoodsList"
            @searchGdsCatAndKwList="searchGdsCatAndKwList"
            ref="setGoodsId"
            :isSearching="isSearching"
            :allowViewStore="allowViewStore"
            :tabIndex="tabIndex"
            :md="md"
        >
        </goodsList>
        <!-- 仓库列表 -->
        <warehouseList
            v-show="is_view_w"
            ref="warehouseList"
            :warehouse_data_ls="warehouse_data_ls"
            @viewWarehouse="getInfo"
        ></warehouseList>
    </view>
</template>

<script>
import search from "../comm/Search.vue";

import filters from "./Goodsfilters.vue";

import goodsList from "./GoodsList.vue";

import warehouseList from "../stock/warehouseList.vue";

import staticConst from "../../js/const/StaticConst.js";

import config from "../../js/conf/Config.js";

import catList from "../../js/gd/CatList.js";

import eventCtrl from "../../js/event/EventCtrl.js";

import https from "../../js/https/Https.js";

import accessCtrl from "../../js/limit/AccessCtrl.js";

import lang from "../../js/conf/Lang.js";

import searcher from "../../js/search/Searcher.js";

import searchPop from "../comm/SearchPop.vue";

import searchKwResult from "../comm/SearchKwResult.vue";

import searchTotal from "../comm/SearchTotal.vue";

import keyboardListener from "uniapp-keyboard-listener";

let pageNo = 0;
let pageSize = staticConst.PAGE_SIZE;
let barndNo = 0;
export default {
    components: {
        search,
        filters,
        goodsList,
        searchPop,
        searchTotal,
        searchKwResult,
        keyboardListener,
        warehouseList,
    },
    props: ["tabIndex", "is_view_w", "md"],
    data() {
        return {
            topValue: this.tabIndex == 12 ? 160 : 110,
            isShowFilters: true, //是否显示过滤栏
            showGoodsState: true, //filters组件的状态过滤显示
            qty_count: {},
            goodsData: {
                is_sale: "", //是否用于开单 1 是 2否 1 的时候返回所有app上架服务
                catid: "", //分类
                brand: "", //品牌
                code: "", //条码值
                is_stock: "", //是否有货 1 是2否
                qty: "", //是否有货 1 是2否
                onsale: "", //是否在app上架 预留
                onsale_yd: "", //是否云店上架 1是2否
                attention: "", //筛选菜蔬 1 ：30天内未销售的服务 2： 7天内发布的服务 3：30天内发布的服务
                kw: "", //搜索关键词
                storeid: "", //仓库I
                suppid: "", //来源
            },
            goodsLs: [], //服务列表
            storeLs: [], //仓库分类列表
            yunLs: [], //云店列表
            brandLs: [], //品牌
            tagsLs: [], //标签
            filltersData: {
                cat: "类别",
                store: "全部仓库",
                inStock: "全部服务",
                screening: "筛选",
                statisticalIndex: 2,
                TimeStateIndex: "",
                StoresStateIndex: "",
                HandlersStateIndex: "",
            },
            placeholder: "请搜索品名",
            BoxHeight: false,
            showAddGoods: false,

            isSearching: false,
            objType: null,
            keyWord: "",
            total: 0,
            exactKw: null,
            allowViewStore: true,
            is_batch_operation: false,
            kwBrand: "",
            warehouse_data_ls: [],
        };
    },

    methods: {
        getInfo(item) {
            this.warehouse_data_ls.map((v) => {
                if (item.id == v.id) {
                    v.acitve = 1;
                } else {
                    v.acitve = 0;
                }
            });
            this.$emit("viewWarehouse", item);
        },
        async viewWarehouse() {
            let url = config.CK_STORE_STORE_CLS;
            let param = {
                ch: "store",
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.ck) {
                res.data.ck.map((v, i) => {
                    if (i == 0) {
                        v.acitve = 1;
                    } else {
                        v.acitve = 0;
                    }
                });
                this.warehouse_data_ls = res.data.ck || [];
                this.$emit("viewWarehouse", res.data.ck[0]);
            }
        },
        operationFun() {
            this.is_batch_operation = !this.is_batch_operation;
            this.$refs.setGoodsId.is_batch_operation =
                !this.$refs.setGoodsId.is_batch_operation;
        },
        triggerBatch(data) {
            this.is_batch_operation = data.is_batch_operation;
        },
        /**********监听数码枪***************/
        scanGunHandler() {
            this.scanGunCtrl.curAct = 1;
            this.scanGunCtrl.gdsCallBack = null
        },

        /****服务扫码加购返回*****/
        scanCallBack(keyCode) {
            this.clearGoodsList();
            if (this.$refs.search) this.$refs.search.setCatSearchTxt(keyCode);
            this.scanGunSearchGdsList(keyCode);
        },

        /***初始化列表***/
        async initData() {
            this.scanGunHandler();
            this.allowViewStore = await accessCtrl.getLimitBillViewInven();
            this.showAddGoods = await accessCtrl.getGdsAddLimit();
            this.clearGoodsList();
            searcher.loadGdsSchObjTypeLs(searcher.CH_XM);

            if (this.scanGunCtrl.rKeyCode != "") {
                this.scanGunAddGoods();
            } else {
                // this.getBrand();
                this.getGoodsList();
            }
        },

        scanGunAddGoods() {
            // let kc = this.scanGunCtrl.rKeyCode;
            // this.$refs.search.setCatSearchTxt(kc);
            // this.addNewGoods(kc); //没有就新建服务
            let keyCode = this.scanGunCtrl.rKeyCode;
            this.scanCallBack(keyCode);
            this.scanGunCtrl.rKeyCode = "";
        },

        /***弹出搜索类型列表***/
        openObjTypeList(value) {
            this.searchAction(true);
            if (value) {
                this.$refs.searchPop.show("show");
                if (this.objType)
                    this.placeholder = "请输入" + this.objType.name;
            } else {
                this.$refs.searchPop.show();
            }
        },

        /***设置输入框，选择的搜索关键字值****/
        setTitleValue(item) {
            this.$refs.search.setCatSearchTxt(item.title);
        },

        /*****搜索服务****/
        doSearch(item, listType) {
            this.clearGoodsList();
            let data = {};
            data.listType = listType;
            this.$refs.search.setCatSearchTxt(item.title);
            if (listType == 0) {
                data.exact = 1;
                data.kw = item.title;
            } else {
                data.exact = 2;
                data.kw = "";
                data.catid = item.id;
            }
            this.exactKw = data;
            this.searchGdsCatAndKwList();
        },

        /****按分类或关键字搜索服务****/
        searchGdsCatAndKwList() {
            if (!this.exactKw) return;
            if (this.isLoading) return;
            this.isLoading = true;
            let that = this;
            let obj = {};
            obj.exact = this.exactKw.exact;
            obj.kw = this.exactKw.kw;
            obj.customerid = "";
            if (this.exactKw.listType == 0) {
                if (this.objType) obj.objtype = this.objType.code;
            } else {
                obj.objtype = "";
                obj.catid = this.exactKw.catid;
            }
            obj.pfrom = pageNo * pageSize;
            obj.pnum = pageSize;
            https.searchXmsCatAndKwList(obj, callBack);
            function callBack(data) {
                that.isLoading = false;
                if (data && data.status == 1) {
                    if (!data.data) return;
                    data = data.data;
                    if (data.total) that.total = data.total;
                    if (!data.goods_ls) return;

                    if (data.tag_ls && pageNo == 0) {
                        that.tagsLs = that.filterDataFormat(
                            lang.tagTxt.title,
                            data.tag_ls
                        );
                    }
                    let goodsInfo = that.setTagInfo(data.goods_ls);

                    that.goodsLs = that.goodsLs.concat(goodsInfo);

                    if (pageNo == 0) {
                        if (that.goodsLs.length > 0) {
                            let goodsData = {};
                            goodsData.id = that.goodsLs[0].id;
                            that.$emit("setGoodsThree", goodsData);
                            that.$refs.setGoodsId.setGoodId(goodsData.id);
                        }
                    }
                    pageNo++;
                }
            }
        },

        /***是否搜索****/
        searchAction(value) {
            this.isSearching = value;
            this.clearGoodsList();
            if (!value) {
                this.$refs.searchPop.show();
                this.exactKw = null;
                this.keyWord = "";
                this.total = 0;
                this.placeholder = "搜索服务";
                this.$refs.search.clearSearchTxt();
                this.$refs.searchKwResult.setListData([]);
                this.$refs.searchKwResult.setListData("");
                this.getGoodsList();
            }
        },

        /***输入关键字搜索*****/
        inputSearchKw(kw) {
            let data = {};
            let that = this;
            this.keyWord = kw;
            data.kw = kw;
            if (this.objType) data.objtype = this.objType.code;
            data.ch = searcher.CH_XM;

            https.searchKwByObjType(data, callBack);
            function callBack(obj) {
                if (obj.status == 1) {
                    if (obj.data.total) that.total = obj.data.total;
                    that.$refs.searchKwResult.setKeyWord(that.keyWord);
                    if (obj.data && obj.data.ls && obj.data.ls.length) {
                        that.$refs.searchKwResult.setListData(obj.data.ls);
                    } else {
                        that.$refs.searchKwResult.setListData([]);
                    }
                } else {
                    that.$refs.searchKwResult.setListData([]);
                }
            }
        },

        /*****输入框获取焦点处理****/
        inputFocus(inputTxt) {
            this.$refs.searchPop.init();
            if (this.objType) this.placeholder = "请输入" + this.objType.name;
            this.$refs.search.searchAction(true);
            if (inputTxt == "") {
                let list = searcher.getProjectCatList();
                let listType = 1; //listType 1:分类列表
                this.$refs.searchKwResult.setListData(list, listType);
            }
        },

        /***改变搜索类型***/
        changeObjType(item) {
            this.placeholder = "请输入" + item.name;
            this.objType = item;
            this.$refs.searchPop.show();
        },

        /****显示或隐藏类型列表****/
        showAndHideTypeList(value) {
            this.$refs.search.setIsOpenList(value);
        },

        /****初始化设置默认objType*****/
        setDefaultObjType(item) {
            this.objType = item;
        },

        /****点击上传服务菜单****/
        upDownClick() {
            this.$emit("upDownClick");
        },

        /*** 根据筛选重新设置list盒子高度 ***/
        setListBoxHeight(data) {
            this.BoxHeight = data;
            if (data) this.topValue = 146;
            else this.topValue = 110;
        },

        /***清除服务列表****/
        clearGoodsList() {
            pageNo = 0;
            this.goodsLs = [];
        },

        clearGdBrandData() {
            barndNo = 0;
        },

        /*** 搜索 ***/
        searchText(kw) {
            let item = this.getSelectedKwTitle();
            this.$refs.searchKwResult.setShowValue(false);
            this.clearGoodsList();
            let data = {};
            if (item != null) {
                this.keyWord = item.title;
                data.exact = 1;
                this.$refs.search.setCatSearchTxt(item.title);
            } else {
                this.keyWord = kw;
                data.exact = 2;
            }
            data.listType = 0;
            data.kw = this.keyWord;
            this.exactKw = data;
            this.searchGdsCatAndKwList();
        },

        /*****获取选择的关键字****/
        getSelectedKwTitle() {
            let item = this.$refs.searchKwResult.getSelectedItem();
            return item;
        },

        setGoodsInfoData(res) {
            this.$emit("setGoodsThree", res);
        },

        /*** 分类搜索 ***/
        setCat(id) {
            this.clearGoodsList();
            this.goodsData.catid = id;
            this.getGoodsList();
        },

        /*** 设置服务筛选  ***/
        setGoods(res) {
            this.clearGoodsList();
            this.goodsData.is_stock = res;
            if (this.md == 12) {
                this.goodsData.qty = res;
            } else {
                this.goodsData.is_stock = res;
            }
            this.getGoodsList();
        },

        /*** 筛选关注  or  品牌 ,云店，标签，***/
        followAndbrand(data) {
            this.clearGoodsList();
            this.goodsData.attention = "";
            this.goodsData.brand = "";
            this.goodsData.idyun = "";
            this.goodsData.tagid = "";
            if (data.attention != -1)
                //关注
                this.goodsData.attention = data.attention;
            if (data.brand != -1)
                //品牌
                this.goodsData.brand = data.brand;
            if (data.idyun != -1) this.goodsData.idyun = data.idyun;
            if (data.tagid != -1) this.goodsData.tagid = data.tagid;
            if (data.suppid != -1) this.goodsData.suppid = data.suppid;

            this.getGoodsList();
        },

        /*** 设置仓库筛选 ***/
        setStoreId(id) {
            this.clearGoodsList();
            this.goodsData.storeid = id;
            this.getGoodsList();
        },

        /****加载品牌接口*****/
        async getBrand(kw = "") {
            let that = this;
            if (this.kwBrand != kw) barndNo = 0;
            let params = {};
            params.status = 1;
            params.pfrom = barndNo * pageSize;
            if (kw != "") params.kw = kw;
            let res = await https.loadBrandList(params);
            console.log("品牌===：", res);
            if (res) {
                setBrandLs(res);
            }

            function setBrandLs(data) {
                let len = data.length;
                let arr = [];
                for (let i = 0; i < len; i++) {
                    let temp = data[i];
                    arr.push({
                        id: temp.id,
                        title: temp.title,
                        logo: temp.logo,
                    });
                }
                if (barndNo == 0) {
                    that.brandLs = arr;
                } else {
                    that.brandLs = that.brandLs.concat(arr);
                }
                console.log("品牌===this.brandLs===：", that.brandLs);
                barndNo++;
            }
        },

        /*** 获取服务列表  GOODS_LIST ***/
        async getGoodsList() {
            if (this.isLoading) return;
            this.isLoading = true;
            let url = config.YY_GOODSINFO_GOODS_LIST;
            let param = {};

            param = this.goodsData;
            param.pfrom = pageNo * pageSize;
            param.pnum = pageSize;
            let res = await this.$api({ url: url, data: param });
            console.log(res,'456');
            if (res.status == 1 && res.data.goodsInfo) {
                res.data.goodsInfo.map((v) => {
                    v.is_checkbox = false;
                });
            }

            this.isLoading = false;
            if (!res || !res.data) {
                if (pageNo == 0) {
                    this.$emit("setGoodsThree");
                }
                return;
            }

            if (res.data.cat_ls) {
                catList.list = res.data.cat_ls;
            }

            if (res.data.store_ls && pageNo == 0)
                this.storeLs = res.data.store_ls;

            if (res.data.yd_ls && pageNo == 0) {
                this.yunLs = this.filterDataFormat(lang.ydTxt, res.data.yd_ls);
            }

            if (res.data.brand_ls && pageNo == 0) {
                this.brandLs = res.data.brand_ls;
            }

            if (res.data.tag_ls && pageNo == 0) {
                this.tagsLs = this.filterDataFormat(
                    lang.tagTxt.title,
                    res.data.tag_ls
                );
            }

            // if(res.data.store_ls && pageNo == 0)
            // 	this.yunLs = res.data.store_ls;
            if (res.data.qty_count) {
                this.qty_count = res.data.qty_count;
            }
            if (res.data.goodsInfo || res.data.goods_ls) {
                // if (res.data.goods_ls) {
                //     res.data.goods_ls.map((v) => {
                //         v.price = v.price_bw || "0";
                //     });
                // }
                let goodsInfo = this.setTagInfo(res.data.goods_ls);
                this.goodsLs = this.goodsLs.concat(goodsInfo);
                pageNo++;
                if (pageNo == 1) {
                    let goodsData = {};
                    goodsData.id = this.goodsLs[0].id;
                    this.$emit("setGoodsThree", goodsData);
                    this.$refs.setGoodsId.setGoodId(goodsData.id);
                }
            } else if (res.data.goods_ls) {
            } else {
                if (pageNo == 0) {
                    this.$emit("setGoodsThree");
                }
            }
        },

        setTagInfo(arr) {
            let len = arr.length;
            for (let i = 0; i < len; i++) {
                let obj = arr[i];
                let tArr = [];

                if (obj.istop == 1) {
                    let aOnsale = {};
                    aOnsale.title = "置顶";
                    aOnsale.type = 0;
                    aOnsale.istop = obj.istop;
                    tArr.push(aOnsale);
                }

                if (obj.onsale == 1 || obj.onsale_yd == 1) {
                    let aOnsale = {};
                    aOnsale.title = "上架";
                    aOnsale.type = 0;
                    aOnsale.onsale = obj.onsale;
                    tArr.push(aOnsale);
                } else {
                    let aOnsale = {};
                    aOnsale.title = "下架";
                    aOnsale.type = 0;
                    aOnsale.onsale = obj.onsale;
                    tArr.push(aOnsale);
                }
                if (obj.onsale_yd == 1) {
                    let yOnsale = {};
                    yOnsale.title = "云店" + obj.onsale_yd_num;
                    yOnsale.type = 1;
                    yOnsale.yunLs = this.getOnsaleYdList(obj.onsale_yds);
                    tArr.push(yOnsale);
                }

                if (obj.tagsInfo) {
                    let tIArr = obj.tagsInfo;
                    let leng = tIArr.length;
                    for (let j = 0; j < leng; j++) {
                        let tObj = {};
                        tObj.title = tIArr[j];
                        tObj.type = 0;
                        tArr.push(tObj);
                    }
                }
                obj.tagsInfo = tArr;
            }
            return arr;
        },

        getOnsaleYdList(arr) {
            let len = arr.length;

            let ydList =
                this.yunLs[0] && this.yunLs[0].ls ? this.yunLs[0].ls : [];
            let tempArr = [];
            for (let i = 0; i < len; i++) {
                let id = arr[i];
                if (ydList && ydList.length > 0) {
                    let leng = ydList.length;
                    for (let j = 0; j < leng; j++) {
                        let obj = ydList[j];
                        if (obj.id == id) {
                            tempArr.push(obj);
                        }
                    }
                }
            }
            return tempArr;
        },

        filterDataFormat(title, arr) {
            let tempArr = [];
            let data = {};
            data.title = title;
            let ary = [];
            if (arr) {
                for (let i = 0; i < arr.length; i++) {
                    let obj = arr[i];
                    let temp = {};
                    if (obj.hasOwnProperty("idyun")) temp.id = obj.idyun;
                    if (obj.hasOwnProperty("id")) temp.id = obj.id;
                    if (obj.hasOwnProperty("name")) temp.title = obj.name;
                    if (obj.hasOwnProperty("title")) temp.title = obj.title;
                    ary.push(temp);
                }
            }
            data.ls = ary;
            tempArr.push(data);
            return tempArr;
        },

        /***添加新的服务***/
        async addNewGoods(keyCode) {
            let that = this;
            https.addProject(back);
            function back(data) {
                if (data != null) {
                    data.actType = staticConst.ACT_GOODS_ADD;
                    if (keyCode) data.keyCode = keyCode;
                    that.$emit("addNewGoods", data);
                }
            }
        },

        /***注册时间***/
        addEvent() {
            uni.$on(eventCtrl.ACTION_GOODS_EVENT, this.actionHandler);
        },

        removeEvent() {
            uni.$off(eventCtrl.ACTION_GOODS_EVENT);
        },

        /****处理操作菜单***/
        actionHandler(data) {
            this.removeEvent();
            this.addEvent();
            let i,
                len = this.goodsLs.length;
            for (i = 0; i < len; i++) {
                let obj = this.goodsLs[i];
                if (obj.id == data) {
                    this.goodsLs.splice(i, 1);
                    break;
                }
            }
            len = this.goodsLs.length;
            if (len > 0) {
                let index = 0;
                if (len > 1) {
                    if (i > 1) {
                        index = i - 1;
                    } else {
                        index = i;
                    }
                }
                let obj = this.goodsLs[index];
                if (obj) {
                    this.setGoodsInfoData(obj);
                }
            }
        },

        /*****更新列表数据*****/
        updateListData(gdInfo) {
            let i,
                len = this.goodsLs.length;
            for (i = 0; i < len; i++) {
                let obj = this.goodsLs[i];
                if (obj.id == gdInfo.id) {
                    // this.goodsLs.splice(i,1);
                    obj.imgs = gdInfo.imgs;
                    obj.title = gdInfo.title;
                    obj.qty = gdInfo.qty;
                    obj.tagsInfo = gdInfo.tagsInfo;
                    obj.price = gdInfo.price;
                    break;
                }
            }
        },

        /****添加服务成功*******/
        addGoodsSuccess() {
            this.clearGoodsList();
            this.getGoodsList();
        },

        onClickPageHandler(event) {
            if (this.isSearching && this.is_batch_operation) return;
            let detail = event.detail;
            if (detail.x < 72 || detail.x > 437 || detail.y < 70) {
                this.$refs.filtersBox.onClickPageHandler(event);
            }
        },

        /****扫码强搜索服务****/
        scanGunSearchGdsList(keyCode) {
            this.isLoading = true;
            let that = this;
            let param = {};
            param.exact = 1;
            param.kw = keyCode;
            param.customerid = this.customerId;
            param.objtype = "barcode";
            param.pfrom = pageNo * pageSize;
            param.pnum = pageSize;
            https.searchGdsCatAndKwList(param, callBack);
            function callBack(data) {
                that.isLoading = false;
                if (data && data.status == 1) {
                    if (!data.data) return;
                    data = data.data;
                    if (data.total) that.total = data.total;
                    if (!data.goods_ls) {
                        that.addNewGoods(keyCode); //没有就新建服务
                        return;
                    }
                    if (data.tag_ls && pageNo == 0) {
                        that.tagsLs = that.filterDataFormat(
                            lang.tagTxt.title,
                            data.tag_ls
                        );
                    }
                    let goodsInfo = that.setTagInfo(data.goods_ls);
                    that.goodsLs = that.goodsLs.concat(goodsInfo);
                    let goodsData = {};
                    goodsData.id = that.goodsLs[0].id;
                    that.$emit("setGoodsThree", goodsData);
                    that.$refs.setGoodsId.setGoodId(goodsData.id);
                    pageNo++;
                }
            }
        },
    },
    mounted() {
        this.addEvent();
    },
};
</script>
<style lang="scss" scoped>
.statistical-warehouse {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 50px;
    // border-bottom: 1px #efefef solid;
    .num-data {
        display: flex;
        flex-wrap: wrap;
        div {
            margin-right: 5px;
        }
    }
    .icon {
        font-size: 14px;
    }
}
.complete {
    height: 40px;
    font-size: 14px;
    background: #f3f3f2;
    display: flex;
    padding-right: 20px;
    align-items: center;
    justify-content: flex-end;
    text {
        cursor: pointer;
    }
}
</style>
<style lang="scss">
.data-box {
    position: fixed;
    margin-left: 0;
    box-sizing: border-box;
    width: 344px;
    height: 100vh;
    border-right: 1px solid #ececec;
    .data-fixed-box {
        width: 344px;
        box-sizing: border-box;
        border-right: 1px solid #ececec;
        position: fixed;
        top: 0;
        background: #fff;
        z-index: 1;
    }
}
</style>